<template>
    <div class="home-container">
        <div class="box1">
            <Carousel />
            <Guide />
        </div>
        <div class="box2">
            <MyApp />
            <Notice />
            <Recommend />
            <AppRecord />
        </div>
    </div>
</template>
<script lang="ts" setup>
import Carousel from './components/Carousel.vue'
import Guide from './components/Guide.vue'
import MyApp from './components/MyApp.vue'
import Notice from './components/Notice.vue'
import Recommend from './components/Recommend.vue'
import AppRecord from './components/AppRecord.vue'
</script>

<style scoped lang="scss">
.home-container {
    width: var(--width-body);
    height: 100%;
    overflow-y: auto;
    padding: 20px 0px;
    margin: auto;
    .box1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        //声明行间距和列间距
        gap: 15px;
        grid-template-rows: 228px;
    }
    .box2 {
        margin-top: 15px;
        display: grid;
        grid-template-columns: 1fr 350px;
        //声明行高度，第一行高度 228px，第二行高度 260px，两行之外的行会将剩余均分
        //grid-template-rows: 260px minmax(260px, auto);
        grid-template-rows: 260px 320px;
        gap: 15px;
    }
}
</style>
